cssnano-preset-default
Advanced tools
The cssnano-preset-default package is a default preset for cssnano, which is a modular minifier for CSS. It includes various optimizations that are safe to use without breaking the CSS. This preset is a collection of default optimizations that can be applied to CSS files to reduce their size and improve loading times in production environments.
Minification
This feature allows you to minify CSS, removing whitespace and comments, and optimizing CSS code to reduce file size.
"use strict";const cssnano=require('cssnano');const presetDefault=require('cssnano-preset-default');const postcss=require('postcss');postcss([cssnano({preset:presetDefault()})]).process('.example { color: #ffffff; }').then(result => {console.log(result.css);});Rebasing z-index values
This feature rebases z-index values to a smaller range to reduce file size without affecting the stacking order of elements.
"use strict";const cssnano=require('cssnano');const presetDefault=require('cssnano-preset-default');const postcss=require('postcss');postcss([cssnano({preset:presetDefault()})]).process('.z1 { z-index: 1000; } .z2 { z-index: 2000; }').then(result => {console.log(result.css);});Reducing CSS calc expressions
This feature optimizes CSS calc expressions by reducing them to their smallest form.
"use strict";const cssnano=require('cssnano');const presetDefault=require('cssnano-preset-default');const postcss=require('postcss');postcss([cssnano({preset:presetDefault()})]).process('h1 { margin-top: calc(10px + 20px); }').then(result => {console.log(result.css);});Merging duplicate rules
This feature merges duplicate CSS rules into one to reduce file size and redundancy.
"use strict";const cssnano=require('cssnano');const presetDefault=require('cssnano-preset-default');const postcss=require('postcss');postcss([cssnano({preset:presetDefault()})]).process('.example { color: red; } .example { color: red; }').then(result => {console.log(result.css);});clean-css is a fast and efficient CSS optimizer for Node.js and the browser. It performs minification, rebasing, and reordering of CSS. While cssnano uses a PostCSS-based plugin system, clean-css is not built on PostCSS and has its own API.
uglifycss is a CSS minifier that compresses CSS files by removing unnecessary whitespace and comments. It is simpler than cssnano and does not offer as many features or optimizations.
purgecss is a tool to remove unused CSS, which can result in smaller CSS files. Unlike cssnano, which focuses on optimizing the CSS itself, purgecss focuses on removing unused styles based on content analysis.
Safe defaults for cssnano which require minimal configuration.
This default preset for cssnano only includes transforms that make no assumptions about your CSS other than what is passed in. In previous iterations of cssnano, assumptions were made about your CSS which caused output to look different in certain use cases, but not others. These transforms have been moved from the defaults to other presets, to make this preset require only minimal configuration.
Note that this preset comes bundled with cssnano by default, so you don't need to install it separately.
If you would like to use the default configuration, then you don't need to add anything to your package.json.
But should you wish to customise this, you can pass an array with the second parameter as the options object to use. For example, to remove all comments:
{
"name": "awesome-application",
+ "cssnano": {
+ "preset": [
+ "default",
+ {"discardComments": {"removeAll": true}}
+ ]
+ }
}
Depending on your usage, the JSON configuration might not work for you, such as in cases where you would like to use options with customisable function parameters. For this use case, we recommend a cssnano.config.js at the same location as your package.json. You can then load a preset and export it with your custom parameters:
const defaultPreset = require('cssnano-preset-default');
module.exports = defaultPreset({
discardComments: {
remove: (comment) => comment[0] === '@',
},
});
Note that you may wish to publish your own preset to npm for reusability, should it differ a lot from this one. This is highly encouraged!
css-declaration-sorter (external)Sorts CSS declarations fast and automatically in a certain order.
This plugin is loaded with the following configuration:
{
keepOverrides: true
}
cssnano-utilsUtility methods used by cssnano
postcss-calc (external)PostCSS plugin to reduce calc()
This plugin is loaded with its default configuration.
postcss-colorminMinify colors in your CSS files with PostCSS.
This plugin is loaded with its default configuration.
postcss-convert-valuesConvert values with PostCSS (e.g. ms -> s)
This plugin is loaded with the following configuration:
{
length: false;
}
postcss-discard-commentsDiscard comments in your CSS files with PostCSS.
This plugin is loaded with its default configuration.
postcss-discard-duplicatesDiscard duplicate rules in your CSS files with PostCSS.
This plugin is loaded with its default configuration.
postcss-discard-emptyDiscard empty rules and values with PostCSS.
This plugin is loaded with its default configuration.
postcss-discard-overriddenPostCSS plugin to discard overridden @keyframes or @counter-style.
This plugin is loaded with its default configuration.
postcss-merge-longhandMerge longhand properties into shorthand with PostCSS.
This plugin is loaded with its default configuration.
postcss-merge-rulesMerge CSS rules with PostCSS.
This plugin is loaded with its default configuration.
postcss-minify-font-valuesMinify font declarations with PostCSS
This plugin is loaded with its default configuration.
postcss-minify-gradientsMinify gradient parameters with PostCSS.
This plugin is loaded with its default configuration.
postcss-minify-paramsMinify at-rule params with PostCSS
This plugin is loaded with its default configuration.
postcss-minify-selectorsMinify selectors with PostCSS.
This plugin is loaded with its default configuration.
postcss-normalize-charsetAdd necessary or remove extra charset with PostCSS
This plugin is loaded with the following configuration:
{
add: false;
}
postcss-normalize-display-valuesNormalize multiple value display syntaxes into single values.
This plugin is loaded with its default configuration.
postcss-normalize-positionsNormalize keyword values for position into length values.
This plugin is loaded with its default configuration.
postcss-normalize-repeat-styleConvert two value syntax for repeat-style into one value.
This plugin is loaded with its default configuration.
postcss-normalize-stringNormalize wrapping quotes for CSS string literals.
This plugin is loaded with its default configuration.
postcss-normalize-timing-functionsNormalize CSS animation/transition timing functions.
This plugin is loaded with its default configuration.
postcss-normalize-unicodeNormalize unicode-range descriptors, and can convert to wildcard ranges.
This plugin is loaded with its default configuration.
postcss-normalize-urlNormalize URLs with PostCSS
This plugin is loaded with its default configuration.
postcss-normalize-whitespaceTrim whitespace inside and around CSS rules & declarations.
This plugin is loaded with its default configuration.
postcss-ordered-valuesEnsure values are ordered consistently in your CSS.
This plugin is loaded with its default configuration.
postcss-reduce-initialReduce initial definitions to the actual initial value, where possible.
This plugin is loaded with its default configuration.
postcss-reduce-transformsReduce transform functions with PostCSS.
This plugin is loaded with its default configuration.
postcss-svgoOptimise inline SVG with PostCSS.
This plugin is loaded with its default configuration.
postcss-unique-selectorsEnsure CSS selectors are unique.
This plugin is loaded with its default configuration.
See CONTRIBUTORS.md.
MIT © Ben Briggs
FAQs
Safe defaults for cssnano which require minimal configuration.
We found that cssnano-preset-default demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 7 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.
Security News
Research
Socket researchers found a malicious Maven package impersonating the legitimate ‘XZ for Java’ library, introducing a backdoor for remote code execution.